<!DOCTYPE html>
<html class='ahmtl'>
<head>
	<title>Jeep开启未来之行</title>
	<meta charset='utf-8'>
	<!-- <meta name="renderer" content="webkit"> -->
	<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0'>
	<meta name="full-screen" content="true">
	<meta name="screen-orientation" content="portrait">
	<meta name="x5-fullscreen" content="true">
	<meta name="360-fullscreen" content="true">
	<script src="js/jq.js"></script>
	<script src="js/jquery.fullPage.js?t=123"></script>
	<link rel="stylesheet" href="js/jquery.fullPage.css">
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <!-- 引用jweixin-->
	<script src="http://lab.socialmaster.com.cn/track/wx.min.js"></script><!-- 检测代码-->
</head>

<script>
	// SM_TRACK.DEBUG = true; // 在页面下方打印 日志信息帮助调试
	// 	SM_TRACK.onMenuShareAppMessage = {
	// 	  title: 'Jeep开启未来之行', // string or function
	// 	  imgUrl: 'http://jeep.cojoy.com.cn/img/fx.jpg', // string or function
	// 	  desc: '业界首个移动智能全路况概念体验，启程未来之旅'
	// 	};
	// 	SM_TRACK.onMenuShareTimeline = {
	// 	  title: 'Jeep开启未来之行', // string or function
	// 	  imgUrl: 'http://jeep.cojoy.com.cn/img/fx.jpg'
	// 	};
	

</script>
<style>
	html,body{font-size:100%;overflow:hidden;}
	html,body,img,ul,li,h3{margin:0;padding:0;}
	li{list-style:none;}
	img{vertical-align:baseline;width:100%;display:block;margin:auto;border:none;}
	.p_a{position:absolute;}
	.p_r{position:relative;}
	.row100{width:100%;}
	img,a{border:none;}
	section{overflow:hidden;}
	html,body{height:100%;overflow:hidden;}
	.section1{background-color:#000;overflow:hidden;}
	.section1 .bg{z-index:1;width:100%;height:100%;top:0;background-image:url(img/index1_bg.jpg);background-repeat:no-repeat;background-size:100% 100%;display:none;}
	.section1 .content{z-index:2;color:#fff;width:100%;height:100%;left:0;top:0;}
	.section1 h3{width:13.1%;right:2rem;top:1.5rem;display:none;z-index:6;}
	.line_b{z-index:3;width:100%;left:0;top:0;display:none;}
	.line_a{z-index:4;width:54.5%;right:0;display:none;}
	.line_a img{top:8.4rem;position:relative;}
	.car{z-index:5;display:none}
	.car img{width:31.2%;text-align:center;position:relative;top:2rem;}
	.tit{z-index:6;text-align:center;position:absolute;display:none;}
	.tit img{width:79.8%;position:relative;top:-2rem;}
	.list{box-sizing:border-box;top:4rem;left:-2rem;z-index:4;}
	.list img{width:70.422%;position:relative;top:11rem;left:7%;}
	.index1_btn{text-align:center;display:none;z-index:12;top:0;}
	.index1_btn img{width:28.3%;position:relative;bottom:.5rem;z-index:9999;}

	.section2 .bg{z-index:1;width:100%;height:100%;top:0;background-image:url(img/index2_bg.jpg);background-repeat:no-repeat;background-size:100% 100%;}
	.section2 .content{z-index:2;color:#fff;width:100%;height:100%;}
	.index2_cir{z-index:2;right:12rem;bottom:4%;width:12.7%;overflow:hidden;}
	.mycire{-webkit-animation:mycire_a 6s infinite;}
	@-webkit-keyframes mycire_a{
		0%{-webkit-transform:rotate(0deg);}
		50%{-webkit-transform:rotate(360deg);}
	}
	.index2_btn{z-index:2;width:18%;right:6%;bottom:4%;}
	.index2_zhe{width:100%;height:100%;left:0;top:0;background:url(img/index2_zhe.jpg) 0 0 no-repeat;background-size:100% 100%;z-index:888;}
	.index2_btn_fade{-webkit-animation:index2_btn_an 1s infinite;}
	.index2_btn_fadea{-webkit-animation:index2_btn_an .6s infinite;}
	@-webkit-keyframes index2_btn_an{
		0%{opacity:1;}
		25%{opacity:.3}
		50%{opacity:1;}
		75%{opacity:.3}
		100%{opacity:1}
	}
	@-webkit-keyframes index2_btn_ana{
		0%{opacity:1;right:30%;bottom:26%;}
		25%{opacity:.3;}
		50%{opacity:1;right:28%;bottom:28%;}
		75%{opacity:.3;}
		100%{opacity:1;right:30%;bottom:26%;}
	}
	
	.section3 .bg{width:100%;height:100%;left:0;top:0;background:url(img/index3_driver.png) center bottom no-repeat;background-size:100% 60%;z-index:5;}
	/*.index3_zhe{left:0;top:0;z-index:1;width:100%;height:100%;background:url(img/index3_driver.png) 0 top no-repeat;background-size:100% 80%;}*/
	.index3_bg{left:0;top:0;z-index:2;height:auto;width:100%;}
	.index3_1{width:60%;z-index:9;left:20%;top:24%;-webkit-transition: all .4s}
	.index3_1a{-webkit-transform:scale(.5);-webkit-transform-origin:0 0;}
	.index3_2{width:21%;z-index:8;right:16%;top:24.5%;}

	.go_in{-webkit-transform-origin:50% 50%;-webkit-animation:go_ins 3.5s;-webkit-animation-fill-mode:forwards;}
	@-webkit-keyframes go_ins{
		0%{-webkit-filter:blur(0px);-webkit-transform:scale(1,1);opacity:1}
		100%{-webkit-filter:blur(3px);-webkit-transform:scale(1.5,1.5);opacity:0}
	}
	.index3_3{z-index:2;width:62%;bottom:10%;right:5%;}
	.index3_4,.index3_5{-webkit-animation:index2_btn_an 2s infinite;}
	.index3_4{z-index:6;width:6.8%;left:40%;top:22%;}
	.index3_5{z-index:8;width:100%;bottom:32%;}
	.index3_5 img{width:10.6%;position:relative;right:15%;float:right;}
	.index3_6{width:49.6%;z-index:9;left:18%;top:16%;-webkit-transition: all .4s}
	.index3_7{width:21.1%;z-index:4;left:35%;top:45%;-webkit-animation:index2_btn_an 1s infinite;}
	.index3_8{z-index:6;width:18%;right:29%;bottom:26%;-webkit-animation:index2_btn_ana 1s infinite;}
	.index3_9{z-index:5;width:45%;top:18%;left:18%;-webkit-transition: all .4s}
	.index3_10{z-index:5;width:31%;right:28%;top:34%;-webkit-animation:index2_btn_an 2s infinite;}
	.index3_11{z-index:5;width:51.5%;left:16%;top:18%;-webkit-transition: all .4s}
	.section4{text-align:center;}
	.section4 .bg{width:100%;height:100%;left:0;top:0;background:url(img/index4_bg.jpg) center bottom no-repeat;background-size:100% 100%;}
	.section4 .content{display:inline-block;height:66%;top:1%;width:76%;margin:auto;}
	.share_btn{width:27.2%;left:36.4%;bottom:1%;}
	.section4 .content video{display:none;position:relative;z-index:2}
	.myvide_zhe{width:100%;height:100%;background-color:#fff;opacity:.01;z-index:222;}
	.index4_1{width:31%;left:34%;top:35%;}
	.orient{width:100%;height:100%;z-index:99999;background:#000;text-align:center;box-sizing:border-box;display:table;}
	.orient_a{display:table-cell;height:100%;vertical-align:middle}
	.orient img{width:100%;max-width:412px;display:inline-block;position:relative;top:-5%;}
	.mus_control{position:fixed;bottom:3%;left:3%;z-index:8888;width:6%;}
	.share_zhe{width:100%;height:100%;background:url(img/share_zhe.png) 0 0 no-repeat;background-size: 100% 100%;z-index:9999;top:0;left:0;display:none;}
	.music_a{left:-999rem;}
	.load_page{display:table;z-index:7777;left:0;top:0;width:100%;height:100%;background:#000;}
	.load_a{display:table-cell;vertical-align:middle;}
	.load_a img{width:56.7%;}
	.load_a img.load_txt{width:27.1%;margin-top:3%;-webkit-animation:index2_btn_an 1.4s infinite;}
</style>
<body class='ahmtl'>
	<div style="display:none;"><img src="img/fx.jpg" alt=""></div>
<div class="mybod">

	

	<!-- 横屏 -->
	<div class="orient p_a">
		<div class="orient_a">
			<img src="img/heng.jpg" alt="">
		</div>
	</div>
	
	<!-- 音乐 -->
	<audio src="img/JEEP_music7.mp3" controls loop preload id="music_a" class="music_a p_a"></audio>
	<img src="img/mus_on.png" alt="" class="mus_control">

	<!-- load -->
	<div class="load_page p_a">
		<div class="load_a">
			<img src="img/load_tit.png" alt="">
			<img src="img/load_txt.png" alt="" class='load_txt'>
		</div>
	</div>




	<div id="fullpage">
		<div class="section section1">
			<div class="bg p_a"></div>
				<h3 class='p_a'><img src="img/logo.png" alt=""></h3>
				<div class='line_a p_a'><img src="img/index1_linea.png" alt=""></div>
				<div class='line_b p_a'><img src="img/index1_lineb.png" alt=""></div>
				<div class="car p_r row100"><img src="img/index1_car.png" alt=""></div>
				<div class="tit p_r row100"><img src="img/index1_tit.png" alt=""></div>
				<div class="list p_r row100"><img src="img/index1_list.png" alt=""></div>
				<div class="index1_btn p_r row100"><img src="img/index1_btn.jpg" alt=""></div>

		</div>
		<div class="section section2">
			<div class="index2_zhe p_a"></div>
			<div class="bg p_a"></div>
			<img src="img/index2_1.png" alt="" class="index2_cir p_a mycire">
			<img src="img/index2_2.png" alt="" class="index2_btn p_a index2_btn_fade">
		</div>
		<div class="section section3">
			<div class="bg p_a"></div>
			<div class="slide1">
				<img src="img/index3_slide1_bg.jpg" alt="" class="index3_bg p_a">
				<img src="img/index3_1.png" alt="" class="index3_1 p_a">
				<img src="img/index3_2.png" alt="" class="index3_2 p_a">
			</div>
			<div class="slide2" style='display:none'>
				<img src="img/index3_slide2_bg.jpg" alt="" class="index3_bg p_a">
				<img src="img/index3_3.png" alt="" class="index3_3 p_a">
				<img src="img/index3_4.png" alt="" class="index3_4 p_a">
				<div class="index3_5 p_a">
					<img src="img/index3_5.png" alt="">
					<img src="img/index3_5.png" alt="" style='visibility:hidden;float:none;clear:both'>
				</div>
				
				<img src="img/index3_6.png" alt="" class="index3_6 p_a">
				<img src="img/index3_7.png" alt="" class="index3_7 p_a">
			</div>
			<div class="slide3" style='display:none'>
				<img src="img/index3_slide3_bg.jpg" alt="" class="index3_bg p_a">
				<img src="img/index3_8.png" alt="" class="index3_8 p_a">
				<img src="img/index3_9.png" alt="" class="index3_9 p_a">
			</div>
			<div class="slide4" style='display:none'>
				<img src="img/index3_slide4_bg.jpg" alt="" class="index3_bg p_a">
				<img src="img/index3_10.png" alt="" class="index3_10 p_a">
				<img src="img/index3_11.png" alt="" class="index3_11 p_a">
			</div>
		</div>

		<div class="section section4">
			<div class="share_zhe p_a"></div>
			<div class="bg p_a"></div>
			<div class="content p_r">
				<div class="myvide_zhe p_a"></div>
				<img src="img/index4_1.png" alt="" class="p_a index4_1">
				<video src="" controls='controls' preload width='100%' height='100%'  id="video_p"></video>
			</div>
			<img src="img/share_btn.png" alt="" class='share_btn p_a'>
		</div>



	</div>

</div>
</body>
<script>
// window.screen.lockOrientation([“landscape-primary”,“landscape-secondary”]);
	// window.screen.lockOrientation = screen.lockOrientation ||screen.mozLockOrientation || screen.msLockOrientation;
	(function($){

	function set1_a(){

		$('.line_a').fadeIn(50).fadeOut(50).fadeIn(50).fadeOut(50).delay(100).fadeOut(100).fadeOut(100).delay('fast',function(){
			//alert('as')
			$('.line_b').fadeIn().delay(200).fadeOut(40).delay('fast',function(){
				$('.section1 h3').fadeIn(50).fadeOut(50).fadeIn(50).fadeOut(50).delay(100).fadeIn(40).delay('fast',function(){
					$('.line_a,.line_b,.section1 .bg').fadeIn(50).delay('fast',function(){
						$('.line_a,.line_b,.index1_btn').show();
						$('.car,.section1 .tit,.section1 h3').fadeIn(50).fadeOut(50).fadeIn(50).fadeOut(50).fadeIn(50).delay('fast',function(){
							$('.section1 .bg').fadeIn();
							
							$('.list img').animate({
								top:"-1.3rem",
								//left:"0"
							})
						});
						
					})
				})
			})
		})
	}

	$(function(){

	/*var a = window.location.href;
		var b = a.toString().search('#');
	
		if (sessionStorage.pagecount)
		  {
		  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
		  }
		else
		  {
		  sessionStorage.pagecount=1;
		  window.location.href= a.substr(0,b);
		  }*/
		  
		  var hash=window.location.hash;
	var url=window.location.href.replace(hash,'');
	if(hash!=""){
		window.location.href=url;
		
		}
		  
		 
	})


		$(function(){


			var imgs = $('#fullpage img');
			var a = false;
			var b = 0;
			imgs.each(function(){
				$(this).load(function(){
					b+=1;
					if(b == imgs.length){
						$('.load_page').fadeOut();
						document.getElementById('music_a').play();
						document.addEventListener("WeixinJSBridgeReady", function () {
						        WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
						  document.getElementById('music_a').play();
						        });
						    }, false);
					}
				})
			})

		})


		if($(document.body).height() > $(document.body).width()){
			 $('.orient').show();
		}
		else{
			 $('.orient').hide();
			 // window.location.reload();
			 set1_a();
		}

		window.addEventListener('orientationchange', function(){
		    if ( window.orientation == 180 || window.orientation==0 ) {
		        $('.orient').show();
		    }
		    if( window.orientation == 90 || window.orientation == -90 ) {
		    	 $('.orient').hide();
		    	 window.location.reload();
		    }
		})

		// 音乐控制
		var va = true;
		$('.mus_control').click(function(){
			var mus = document.getElementById('music_a');
			if(!va){
				mus.play();
				$(this).attr('src','img/mus_on.png');
				va = true;
			}else{
				mus.pause()
				$(this).attr('src','img/mus_off.png')
				va = false;
			}
		})


		// 设置字体
		var fontsize=Math.round($('.ahmtl').width()/38) + "px";
		$('.ahmtl').css({fontSize:fontsize});

		$('.myvide_zhe').click(function(){
			$('.index4_1').hide();
			$('.section4 .content video').show();
			var myVideo = document.getElementById('video_p');
			if (myVideo.paused) 
			  myVideo.play(); 
			else 
			  myVideo.pause();
			document.getElementById('music_a').pause();
			$('.mus_control').attr('src','img/mus_off.png');
			va = false;
		})

// $('.section1 .line_a,.line_b,.section1 .bg,.car,.section1 .tit,.section1 h3,.index1_btn').show()
		$('.index1_btn img').on('mousedown touchstart',function(){
			$.fn.fullpage.moveTo(2)
		})


		$('.share_btn').on('mousedown',function(){
			$('.share_zhe').fadeIn().click(function(){
				$(this).fadeOut();
			});

		})


	
	$('#fullpage').fullpage({
		// 'autoScrolling':false,
    	'verticalCentered': true,
        'css3': true,
        anchors: ['page1','page2','page3','page4'],

        'afterLoad': function(anchorLink, index){
        	if(index==1){
        		//alert('a')
        		set1_a();

        	}
        	if(index==2){
        		$('.index2_zhe').show(200);
        		$('.index2_zhe').click(function(){
        			$(this).fadeOut().remove();
        		})

        		$('.index2_btn').on('mousedown touchstart',function(){
        			$.fn.fullpage.moveTo(3)
        		})
        	}
        	if(index==3){
        		$('.slide1 .index3_1,.slide2 .index3_6,.section3 .slide3 .index3_9,.section3 .slide4 .index3_11').click(function(){
        			$(this).toggleClass('index3_1a')
        		})
        		$('.index3_1').click(function(){
        			$('.index3_2').addClass('index2_btn_fadea')
        		})

        		$('.slide1 .index3_2').click(function(){
        			$('.section3 .slide1 .index3_bg').addClass('go_in').delay(1000).delay(2,function(){
        				// $('.section3 .slide1)
        			})
					$('.section3 .slide2').fadeIn(1000);
					$('.section3 .slide1 .index3_1,.section3 .slide1 .index3_2').fadeOut(1000).remove();
					
        		})
        		$('.index3_3').click(function(){
        			// alert('a')
        		})
        		$('.index3_5,.index3_4,.index3_7').click(function(){
					$('.section3 .slide2').fadeOut(1000);
					$('.section3 .slide2 .index3_bg').addClass('go_in').delay(2000).delay(2,function(){
						
						
					})
					$('.section3 .slide3').delay(500).fadeIn(1000);
					
				})

        		$('.index3_8').on('touchmove click',function(){
					$('.section3 .slide3').fadeOut(1000);
					$('.section3 .slide3 .index3_bg').addClass('go_in').delay(2000).delay(2,function(){
						
					})
					$('.section3 .slide4').delay(500).fadeIn(1000);
					
				})

				$('.index3_10').click(function(){
					$.fn.fullpage.moveSectionDown()
				})


        		
        	}
        	
        },

        'onLeave': function(index, nextIndex, direction){
        	if(index==1){
        		$('.section1 .line_a,.line_b,.section1 .bg,.car,.section1 .tit,.section1 h3,.index1_btn').hide().stop(function(){});
        		$('.list img').animate({
					top:'11rem',
					left:'7%',
					opacity:'0'
				})
        	}
        	if(index==2){
        		$('.index2_zhe').hide();

        	}
        	if(index==4){
        		document.getElementById('video_p').pause();
        	}
        }
    });


    $.ajax({  
        url: 'http://events.youku.com/2015/misc/api/video-files.php?vid=XOTM4MDI0OTQw&qq-pf-to=pcqq.c2c',
        dataType:'XML',
        success: function(data){
        	console.log($(data).find('mp4 url').text())
            $('#video_p').attr('src',$(data).find('mp4 url').text())
        }
    })

})(jQuery);	

</script>
</html>